<template>
  <div class="notice-wrap">
    <div class="title-wrap">
      <span class="title">公告区</span>
      <span class="more">更多</span>
    </div>
    <ul class="list-wrap">
      <li
        v-for="(item, index) in list"
        :key="index"
      >
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    list: {
      type: Array
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .notice-wrap {
    margin-top: 10px;
    .title-wrap {
      display: flex;
      padding-left: 10px;
      height: 30px;
      line-height: 30px;
      background-color: @mainBgColor;
      color: #fff;
      .more {
        flex: 0 0 50px;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .title {
        flex: 1;
      }
    }
    .list-wrap {
      li {
        line-height: 30px;
        padding-right: 10px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        cursor: pointer;
        &:hover {
          color: @mainBgHoverColor;
        }
      }
    }
  }
</style>
